<template>
  <div class="page-container">
    <!-- 学科筛选区域 -->
    <div class="search-bar">
      <label class="search-label">学科：</label>
      <el-select 
        v-model="selectedSubject" 
        placeholder="请选择学科" 
        class="search-select"
      >
        <el-option 
          v-for="subject in subjectOptions" 
          :key="subject.value" 
          :label="subject.label" 
          :value="subject.value" 
        />
      </el-select>
      <el-button type="primary" @click="handleQuery">查询</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table 
      :data="tableData" 
      border 
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column 
        prop="id" 
        label="Id" 
        align="center" 
      />
      <el-table-column 
        prop="paperName" 
        label="试卷名称" 
        align="center" 
      />
      <el-table-column 
        prop="username" 
        label="用户名称" 
        align="center" 
      />
      <el-table-column 
        prop="score" 
        label="得分" 
        align="center" 
      />
      <el-table-column 
        prop="questionResult" 
        label="题目对错" 
        align="center" 
      />
      <el-table-column 
        prop="timeCost" 
        label="耗时" 
        align="center" 
      />
      <el-table-column 
        prop="submitTime" 
        label="提交时间" 
        align="center" 
      />
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 引入 Element-Plus 组件（需确保已全局注册或按需引入）
import { ElSelect, ElOption, ElButton, ElTable, ElTableColumn } from 'element-plus'

// 学科下拉选项（可动态从接口获取）
const subjectOptions = ref([
  { label: '数学', value: '数学' },
  { label: '语文', value: '语文' },
  { label: '英语', value: '英语' }
])

// 选中的学科
const selectedSubject = ref('')

// 表格数据（模拟接口返回数据）
const tableData = ref([
  { id: 17, paperName: '高三数学固定试卷2', username: 'student', score: '0 / 10', questionResult: '0 / 1', timeCost: '6秒', submitTime: '2023-07-27 02:49:44' },
  { id: 16, paperName: '高三语文固定试卷2', username: 'zoudexiang', score: '20 / 20', questionResult: '2 / 2', timeCost: '2秒', submitTime: '2023-07-26 02:17:54' },
  { id: 15, paperName: '高三数学固定试卷1', username: 'zoudexiang', score: '0 / 10', questionResult: '0 / 1', timeCost: '1秒', submitTime: '2023-07-26 02:17:40' },
  { id: 14, paperName: '高三数学固定试卷2', username: 'zoudexiang', score: '0 / 10', questionResult: '0 / 1', timeCost: '1秒', submitTime: '2023-07-26 02:17:34' },
  { id: 13, paperName: '高三数学固定试卷2', username: 'anshubin112321321', score: '0 / 10', questionResult: '0 / 1', timeCost: '1秒', submitTime: '2023-07-26 02:16:40' },
  { id: 12, paperName: '任务试卷1', username: 'anshubin112321321', score: '10 / 10', questionResult: '1 / 1', timeCost: '4秒', submitTime: '2023-07-26 02:15:38' }
])

// 查询方法（可对接实际接口）
const handleQuery = () => {
  console.log('当前选择的学科：', selectedSubject.value)
  // 示例：调用接口传递学科参数
  // axios.post('/api/query', { subject: selectedSubject.value }).then(res => {
  //   tableData.value = res.data.list
  // })
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  background: #fff;
}
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.search-label {
  margin-right: 8px;
}
.search-select {
  width: 180px;
  margin-right: 10px;
}
</style>